<template>
  <div class="cont_scroll">
    <!-- 星座卡详情 -->
    <div class="cont__wp mb-22">
      <div class="detail-hd">
        <div class="detail-hd-lt">
          <div class="detail-hd-lt__title">星座卡详情</div>
          <div class="detail-hd-lt__tag">
            {{ cardInfo.status_text }}
          </div>
        </div>
        <div class="detail-hd-rt">
          <el-icon color="#000" size="16" @click="goBack"><Close /></el-icon>
        </div>
      </div>
      <div class="detail-bd">
        <div class="detail-bd-lt">
          <img
            alt=""
            class="detail-bd-lt__img"
            src="@/assets/image/card-bg.png"
          />
          <div class="detail-bd-lt__wp">
            <div class="detail__wp__cardNo">
              {{ formatBankCard(cardInfo.api_card_no) }}
            </div>
            <div class="detail__wp-info">
              <div class="detail__wp-info__name">
                <template
                  v-if="
                    cardInfo.hold
                      ? cardInfo.hold.firstname || cardInfo.hold.lastname
                      : false
                  "
                >
                  {{ cardInfo ? cardInfo.hold.firstname : '--' }}
                  {{ cardInfo ? cardInfo.hold.lastname : '--' }}
                </template>
                <template v-else>匿名卡</template>
              </div>
              <div class="detail__wp-info__time">
                {{ cardInfo.api_card_expire }}
              </div>
              <div class="detail__wp-info__nun">
                {{ cardInfo.api_card_cvv }}
              </div>
            </div>
          </div>
        </div>
        <div class="detail-bd-rt">
          <div class="detail-bd-rt-tp">
            <div class="detail-bd-tp-item1">
              <div class="detail-item1-hd">
                <img
                  alt=""
                  class="detail-item1-hd__icon"
                  src="@/assets/image/wallet-icon.png"
                />
                <span class="detail-item1-hd__title">卡可用余额</span>
              </div>
              <div class="detail-item1-bd">
                ${{ cardInfo.current_balance || 0 }}
              </div>
            </div>
            <div class="detail-bd-tp-item2">
              <div class="detail-item2-hd">
                <span class="detail-item2__label">卡累计消费:</span>
                <span class="detail-item2__val">
                  ${{ cardInfo.total_cost || 0 }}
                </span>
              </div>
              <div class="detail-item2-bd">
                <span class="detail-item2__label">卡累计充值:</span>
                <span class="detail-item2__val">
                  ${{ cardInfo.total_recharge || 0 }}
                </span>
              </div>
            </div>
            <div class="detail-bd-tp-item3">
              <div class="detail-item3-hd">
                <span class="detail-item3__label">卡累计退款:</span>
                <span class="detail-item3__val">
                  ${{ cardInfo.total_refund || 0 }}
                </span>
              </div>
              <div class="detail-item3-bd">
                <span class="detail-item3__label">卡累计转出:</span>
                <span class="detail-item3__val">
                  ${{ cardInfo.total_draw_out }}
                </span>
              </div>
            </div>
          </div>
          <div class="detail-bd-rt-ct">
            <div class="detail-bd-rt-ct-item mb-10">
              <span class="detail-bd-rt-ct-item__label">卡标签</span>
              <span class="detail-bd-rt-ct-item__value">
                {{ cardInfo.label || '默认' }}
              </span>
            </div>
            <div class="detail-bd-rt-ct-item">
              <span class="detail-bd-rt-ct-item__label">账单地址</span>
              <span class="detail-bd-rt-ct-item__value">
                {{ cardInfo.hold ? cardInfo.hold.billingaddress : '--' }}
              </span>
            </div>
          </div>
          <div class="detail-bd-rt-ft" @click="paste">复制卡信息>></div>
        </div>
      </div>
    </div>
    <el-card class="box-card">
      <el-divider class="mb-18 mt-36" />
      <!-- 查询条件 -->
      <el-form
        ref="searchForm"
        :inline="true"
        :model="searchForm"
        @submit.native.prevent
      >
        <el-form-item prop="trade_id">
          <el-input
            v-model="searchForm.trade_id"
            clearable
            placeholder="请输入交易ID"
          />
        </el-form-item>
        <el-form-item prop="type">
          <el-select
            v-model="searchForm.type"
            clearable
            placeholder="请选择交易类型"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="status">
          <el-select
            v-model="searchForm.status"
            clearable
            placeholder="请选择交易状态"
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span>{{ item.label }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="detail">
          <el-input
            v-model="searchForm.detail"
            clearable
            placeholder="请输入交易详情"
          />
        </el-form-item>
        <el-form-item prop="createTime">
          <el-date-picker
            v-model="searchForm.createTime"
            clearable
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            type="daterange"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            native-type="submit"
            type="purple"
            @click="handleSearch"
          >
            搜索
          </el-button>
          <el-button
            icon="el-icon-search"
            native-type="submit"
            type="default"
            @click="handleReset"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <!-- 导出/配置 -->
      <div style="display: flex; justify-content: space-between">
        <div>
          <el-button
            icon="el-icon-download"
            native-type="submit"
            plain
            type="primary"
          >
            导出记录
          </el-button>
        </div>
        <el-popover popper-class="custom-table-checkbox" trigger="hover">
          <el-checkbox-group v-model="checkList">
            <vab-draggable v-bind="dragOptions" :list="columns">
              <div v-for="(item, index) in columns" :key="item + index">
                <vab-icon icon="drag-drop-line" style="margin-right: 8px" />
                <el-checkbox
                  :disabled="item.disableCheck === true"
                  :label="item.label"
                >
                  {{ item.label }}
                </el-checkbox>
              </div>
            </vab-draggable>
          </el-checkbox-group>
          <template #reference>
            <el-button
              icon="el-icon-setting"
              plain
              style="margin: 0 0 10px 0 !important"
              type="primary"
            >
              配置
            </el-button>
          </template>
        </el-popover>
      </div>
      <!-- 列表 -->
      <el-table
        ref="tableSort"
        v-loading="listLoading"
        :border="border"
        :data="list"
        :height="height"
        :size="lineHeight"
        :stripe="stripe"
        style="margin-top: 36px"
        @selection-change="setSelectRows"
      >
        <el-table-column
          v-for="(item, index) in finallyColumns"
          :key="index"
          align="center"
          :label="item.label"
          :prop="item.prop"
          :sortable="item.sortable"
          :width="item.width"
        >
          <template #default="{ row }">
            <el-tag
              v-if="item.label === '交易状态'"
              :type="
                row.status == 10
                  ? 'success'
                  : row.status == 0
                  ? 'danger'
                  : 'info'
              "
            >
              {{ row.status_text }}
            </el-tag>
            <span v-else>{{ row[item.prop] }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column
            align="center"
            label="操作"
            show-overflow-tooltip
            width="85"
          >
            <template #default="{ row }">
              <el-button type="text" @click="handleEdit(row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column> -->
        <template #empty>
          <el-image
            class="vab-data-empty"
            :src="require('@/assets/empty_images/data_empty.png')"
          />
        </template>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        :current-page="searchForm.page"
        :layout="layout"
        :page-size="searchForm.limit"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-card>
  </div>
</template>

<script>
  import {
    getPrepaidCardDetail,
    getCardType,
    getCardStatus,
    getCardTradeList,
  } from '@/api/card'
  import VabDraggable from 'vuedraggable'
  export default {
    name: 'PrepaidCardDetail',
    components: {
      VabDraggable,
    },
    data() {
      return {
        cardInfo: {}, // 星座卡详情信息
        api_card_id: '', // 路由参数
        searchForm: {
          page: 1,
          limit: 10,
          createtime: [],
          trade_id: '',
          type: '',
          status: '',
          detail: '',
        },
        typeList: [], // 交易类型
        statusList: [], // 交易状态
        pickerOptions: {
          disabledDate(date) {
            return date.getTime() > Date.now()
          },
        },
        checkList: [
          '交易创建时间',
          '交易ID',
          '类型',
          '详情',
          '备注',
          '交易金额',
          '手续费',
          '交易状态',
        ],
        columns: [
          {
            label: '交易创建时间',
            width: 'auto',
            prop: 'createtime_text',
          },
          {
            label: '交易ID',
            width: 'auto',
            prop: 'id',
          },
          {
            label: '交易描述',
            width: 'auto',
            prop: 'memo',
          },
          {
            label: '交易类型',
            width: 'auto',
            prop: 'type_text',
          },
          {
            label: '币种',
            width: 'auto',
            prop: 'coin',
          },
          {
            label: '交易金额',
            width: 'auto',
            prop: 'open_fee',
          },
          {
            label: '手续费',
            width: 'auto',
            prop: 'service_fee',
          },
          {
            label: '交易状态',
            width: 'auto',
            prop: 'status_text',
          },
        ],
        list: [],
        listLoading: true,
        layout: '->,total, sizes, prev, pager, next, jumper',
        total: 0,
        border: false,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'medium',
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 600,
          group: 'description',
        }
      },
      finallyColumns() {
        return this.columns.filter((item) =>
          this.checkList.includes(item.label)
        )
      },
    },
    created() {
      this.api_card_id = this.$route.query.id
      this.getPrepaidCardDetail()
      this.getCardType()
      this.getCardStatus()
      this.fetchData()
    },
    methods: {
      // 星座卡详情
      async getPrepaidCardDetail() {
        const object = {
          api_card_id: this.api_card_id,
        }
        const { code, data, msg } = await getPrepaidCardDetail(object)
        if (code === 1) {
          this.cardInfo = data
        } else {
          this.$message.warning(msg)
        }
      },
      // 交易类型
      async getCardType() {
        const { code, data } = await getCardType()
        if (code === 1) {
          let arr = []
          for (let i in data) {
            arr.push({
              label: data[i],
              value: i,
            })
          }
          this.typeList = arr
        }
      },
      // 交易状态
      async getCardStatus() {
        const { code, data } = await getCardStatus()
        if (code === 1) {
          let arr = []
          for (let i in data) {
            arr.push({
              label: data[i],
              value: i,
            })
          }
          this.statusList = arr
        }
      },
      // 列表
      async fetchData() {
        this.listLoading = true
        this.searchForm = Object.assign(this.searchForm, {
          createtime: this.searchForm.createTime
            ? this.searchForm.createTime.join('~')
            : '',
        })
        const {
          data: { data, total },
          code,
        } = await getCardTradeList(this.searchForm)
        if (code === 1) {
          this.list = data
          this.total = total
          this.listLoading = false
        }
      },
      // 返回
      goBack() {
        this.$router.back()
      },
      /* 格式化银行卡*/
      formatBankCard(cardNumber) {
        if (cardNumber) {
          return cardNumber.replace(/(\d{4})(?=\d)/g, '$1')
        }
      },
      // 复制到粘贴板
      paste() {
        if (this.cardInfo) {
          navigator.clipboard.writeText(this.cardInfo).then(
            () => {
              console.log(this.cardInfo.api_card_id)
              this.$message.success('复制成功')
            },
            () => {
              console.error('无法复制')
            }
          )
        }
        // try {
        //   // 创建clipboard对象并调用readText()方法读取剪贴板上的内容进行返回
        //   const cardInfo = await navigator.clipboard.readText(this.cardInfo)
        //   console.log('要粘贴的内容为：', `${cardInfo.api_card_id}`)
        // } catch (err) {
        //   // catch捕获处理报错
        //   console.log('粘贴失败！', err)
        // }
      },
      // 查询
      handleSearch() {
        this.searchForm.page = 1
        this.fetchData()
      },
      // 重置
      handleReset() {
        this.searchForm = {
          createtime: [],
          trade_id: '',
          type: '',
          status: '',
          detail: '',
        }
      },
      handleSizeChange(val) {
        this.searchForm.limit = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.searchForm.page = val
        this.fetchData()
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      /*复制**/
      // copy() {
      //   copy(
      //     `${this.cardInfo.value.photon_card_no}  ${this.cardInfo.value.firstname} ${this.cardInfo.value.lastname}  ${this.cardInfo.value.expirationDate}  ${this.cardInfo.value.cvv}`
      //   )
      // },
    },
  }
</script>

<style lang="scss" scoped>
  .cont_scroll {
    height: 100%;
    overflow-y: scroll;
  }

  .cont__wp {
    padding: 24px 26px;
    background: #fff;
    border-radius: 12px;
  }

  .export__btn {
    width: 80px;
    height: 28px;
    background: rgba(64, 158, 255, 0.05);
    border-radius: 3px;
    border: 1px solid #409eff;
    font-size: 11px;
    color: #409eff;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail-hd {
    padding-bottom: 22px;
    border-bottom: 1px solid #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .detail-hd-lt {
      display: flex;
      align-items: center;
      .detail-hd-lt__title {
        font-weight: 600;
        font-size: 18px;
        color: #333333;
        margin-right: 18px;
        padding-left: 10px;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          width: 4px;
          height: 20px;
          background: #6b1ce9;
          border-radius: 3px;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .detail-hd-lt__tag {
        padding: 4px 8px;
        font-size: 10px;
        color: #6b1ce9;
        background: rgba(107, 28, 233, 0.05);
        border-radius: 2px;
        border: 1px solid #6b1ce9;
      }
    }
    .detail-hd-rt {
      cursor: pointer;
    }
  }

  .detail-bd {
    padding: 16px 0;
    display: flex;
    .detail-bd-lt {
      width: 400px;
      height: 254px;
      margin-right: 40px;
      position: relative;
      color: #ffffff;
      .detail-bd-lt__img {
        width: 100%;
        height: 100%;
      }
      .detail-bd-lt__wp {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .detail__wp__cardNo {
          font-family: AppleSystemUIFont;
          font-size: 26px;
          margin-top: 110px;
          line-height: 30px;
          padding-left: 24px;
          letter-spacing: 2px;
        }
        .detail__wp-info {
          margin-top: 70px;
          display: flex;
          padding: 0 116px 0 24px;
          display: flex;
          align-items: center;
          .detail__wp-info__name {
            font-weight: 400;
            font-size: 18px;
            color: #ffffff;
            line-height: 25px;
          }

          .detail__wp-info__time {
            flex: 1;
            text-align: right;
            font-size: 18px;
            color: #ffffff;
            line-height: 21px;
          }
          .detail__wp-info__nun {
            font-size: 18px;
            color: #ffffff;
            line-height: 25px;
            margin-left: 16px;
          }
        }
      }
    }
    .detail-bd-rt {
      flex: 1;
      .detail-bd-rt-tp {
        display: flex;
        .detail-bd-tp-item1 {
          flex: 1;
          background: #f3f4f5;
          border-radius: 6px;
          padding: 10px 16px 21px;
          margin-right: 10px;
          .detail-item1-hd {
            display: flex;
            align-items: center;
            .detail-item1-hd__icon {
              width: 30px;
              height: 30px;
            }
            .detail-item1-hd__title {
              font-size: 14px;
              color: #333333;
              line-height: 1;
              margin-top: 4px;
            }
          }
          .detail-item1-bd {
            font-weight: 600;
            font-size: 24px;
            color: #333333;
            margin-top: 16px;
          }
        }
        .detail-bd-tp-item2 {
          flex: 1;
          display: flex;
          flex-direction: column;
          margin-right: 10px;
          .detail-item2-hd,
          .detail-item2-bd {
            flex: 1;
            background: #f3f4f5;
            border-radius: 6px;
            padding: 0 20px;
            display: flex;
            align-items: center;
          }
          .detail-item2-bd {
            margin-top: 10px;
          }
          .detail-item2__label {
            font-size: 14px;
            color: #666666;
          }
          .detail-item2__val {
            font-weight: 600;
            font-size: 18px;
            color: #666666;
            margin-left: 8px;
          }
        }
        .detail-bd-tp-item3 {
          flex: 1;

          display: flex;
          flex-direction: column;
          .detail-item3-hd,
          .detail-item3-bd {
            flex: 1;
            background: #f3f4f5;
            border-radius: 6px;
            padding: 0 20px;
            display: flex;
            align-items: center;
          }
          .detail-item3-bd {
            margin-top: 10px;
          }
          .detail-item3__label {
            font-size: 14px;
            color: #666666;
          }
          .detail-item3__val {
            font-weight: 600;
            font-size: 18px;
            color: #666666;
            margin-left: 8px;
          }
        }
      }
      .detail-bd-rt-ct {
        margin-top: 9px;
        padding: 12px 16px;
        background: #f3f4f5;
        border-radius: 6px;
        .detail-bd-rt-ct-item {
          display: flex;
          flex-direction: column;
          .detail-bd-rt-ct-item__label {
            font-size: 13px;
            color: #999999;
          }
          .detail-bd-rt-ct-item__value {
            font-size: 14px;
            color: #666666;
            margin-top: 4px;
          }
        }
      }
      .detail-bd-rt-ft {
        margin-top: 8px;
        font-size: 12px;
        color: #6b1ce9;
        cursor: pointer;
      }
    }
  }
  ::v-deep .el-range-editor--small .el-range-separator {
    width: 60px;
  }
</style>
